
.navbar-nav li:hover a {
    color: #2270ef !important;
}

#head_div img {
    border-radius: 50%;
    vertical-align: middle;
    /*border: 2px solid;*/
}

#alarm_ico {
    color: #b9bbbe;
}

/*灰色字体*/
.gray_font_color {
    color: #b9bbbe;
}

.green_font_color {
    color: limegreen;
}

.red_font_color {
    color: red;
}


/*自定义的按钮组件*/
.my_button {
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    cursor: pointer;
    background-color: white;
    padding: 8px;
}

.my_button_primary {
    color: #007bff;
    border-bottom-color: #007bff;
}

.my_button_danger {
    color: #007bff;
    border-bottom-color: #007bff;
}

/*#alarm_ico :hover {*/
/*    color: #2270ef;*/
/*}*/

#user_flex {
    display: none;
    margin-top: 0.3rem;
    position: absolute;
    z-index: 9999;
    width: 20rem;
    height: auto;
    box-shadow: 0 5px 10px 0 #6c757d;
}

#user_flex img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}

/*用户悬浮窗按钮*/
.user_flex_btn {
    width: 8rem;
    height: 2rem;
    background-color: #eceef0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    text-decoration: none;
    color: black;
}

.user_flex_btn:hover {
    background-color: #007bff;
    color: white;
    text-decoration: none;
}

body {
    min-width: 95rem;
    background-color: #f5f6f7;
}


.nav-link {
    font-size: 1.3rem;
}

#nav_bar {
    display: block;
}

#footer_div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 8rem;
    background-color: #343a40;
}

#alarm_ico_count {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 3px;
    font-size: 13px;
    background-color: red;
    color: white;
    border-radius: 50%;
}

#alarm_ico_count :hover {
    color: white;
}

.alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 5rem;
    max-width: 20rem;
    transform: translate(-50%, -50%);
    z-index: 99999;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

#search_bar {
    margin-left: 400px;
}


@media screen and (max-device-width: 960px) {
    #user_flex {
        left: 50%;
        transform: translateX(-50%);
    }

    #nav_bar {
        display: flex;
    }

    body {
        min-width: 0 !important;
    }

    #search_bar {
        margin-left: 0;
        width: 100%;
    }
    #search_bar form{
        width: 100%;
    }
    #search_bar form input{
        width: 80%;
    }
    #search_bar form button{
        width: 20%;
    }

    /*#head_div {*/
    /*    margin-left: auto;*/
    /*    margin-right: auto;*/
    /*}*/
}